<!DOCTYE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewort" content="width=device-width, initial-scale=1.0" />
    <title>欢迎注册会员</title>
    <style>
      .gcode {
        width: 100%;
        height: 30px;
        background-color: #cc99cc;
        background-size: 100%;
        text-align: center;
        line-height: 30px;
        font-size: 16pt;
        letter-spacing: 10px;
        font-style: italic;
        cursor: pointer;
        user-select: none;
      }
      #cbt {
        width: 2%;
        height: 25px;
      }
    </style>
  </head>
  <body>
    <form 
    action="/WebRscs/Home/home.html"
    method="post">
      <div>
        <b style="color: blue">欢迎注册会员</b>
      </div>
      <div>
        <p></p>
        <label for="telnumber"><b>手机号码:</b></label>
        <input
          type="text"
          name="telnumber"
          id="telnumber"
          maxlength="11"
          placeholder="11位手机号"
        />
        <span style="color: red">必填</span>
      </div>
      <p></p>
      <div>
        <label for="pwd"><b>创建密码:</b></label>
        <input
          type="password"
          name="pwd"
          id="pwd"
          maxlength="8"
          placeholder="8位密码"
        />
        <span style="color: red">必填</span>
      </div>
      <p></p>
      <div>
        <label for="mailbox"><b>注册邮箱:</b></label>
        <input
          type="text"
          name="mailbox"
          id="mailbox"
          placeholder="例如:wustzz@sina.com"
        />
        <span style="color: red">必填</span>
      </div>
      <p></p>
      <div>
        <label for="checkCode"><b>&nbsp;&nbsp;&nbsp;验证码:</b></label>
        <input type="text" name="yzm" id="yzm">
          <span class="gcode"></span>
            <button id="cbt"><img src="/images/flush.png" width="20"height=20/></button>
      </div>
      <p></p>
      <div>
        <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别:</b>
        <input type="radio" name="sex" value="male" />男
        <input type="radio" name="sex" value="female" />女
      </div>
      <p></p>
      <div>
        <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生日:</b>
        <input type="date" name="mydate"/>
      </div>
      <p></p>
      <div>
        <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年龄:</b>
        <input type="text" name="age" id="age" />
      </div>
      <p></p>
      <div>
        <label>
          <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍贯:</b>
          <select onchange="changeCity(this.value)">
            <option>-请选择省份-</option>
            <option value="0">北京</option>
            <option value="1">浙江省</option>
            <option value="2">河北省</option>
            <option value="3">广东省</option>
            <option value="4" selected="selected">湖北省</option>
          </select>
          <select id="city">
            &nbsp;&nbsp;
          </select>
        </label>
      </div>
      <p></p>
      <div>
        <b>个人学历:</b>
        <select name="education">
          <option>&nbsp;---请选择学历---&nbsp;</option>
          <option value="0">小学</option>
          <option value="1">初中</option>
          <option value="2">高中</option>
          <option value="3">专科</option>
          <option value="4" selected="selected">本科</option>
          <option value="5">硕士</option>
        </select>
      </div>
      <p></p>
      <div>
        <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月薪:</b>
        <input
          type="range"
          name="wage"
          id="wage"
          min="0"
          max="10000"
          step="1"
          value="5000"
        />
        <span id="msg"></span>
      </div>
      <p></p>
      <div>
        <b>个人爱好:</b>
        <label>
          <input type="checkbox" name="like" id="like" value="sing" />唱歌
        </label>
        <label>
          <input type="checkbox" name="like" id="like" value="run" />跑步
        </label>
        <label>
          <input type="checkbox" name="like" id="like" value="swim" />游泳
        </label>
      </div>
      <p></p>
      <div>
        <b>个人照片:</b>
        <input type="file" id="test-image-file" name="test" accept="image"/>
      </div>
          <div
            id="test-image-preview"
            style="
              border: 1px solid silver;
              width: 30%;
              height: 200px;
              background-repeat: no-repeat;
              background-position: center;"
          ></div>
          <p></p>
          <p></p>
          <p id="test-file-info">没有选择文件</p>
      </div>
      <div>
        <b>个人简介:</b>
        <textarea name="bio" cols="40" rows="10"></textarea>
      </div>
      <p></p>
      <div>
        <input type="submit" value="提交" />
        <input type="reset" value="重填" /><br>
        <a href="/WebRscs/Home/home.html">返回</a>
      </div>
    </form>
    <script>
      var msg = document.getElementById("msg"); 
      window.onload = function () {
        msg.innerHTML = document.getElementById("wage").value; 
      };
      document.getElementById("wage").onchange = function () {
        msg.innerHTML = this.value;   // 将当前区间域的value作为span元素的内容
      };
      // 根据id值找到span元素
      // 获取区间域初始value值
    
    </script>

        <script>
          var ecbt = document.querySelector("#cbt");
          var egcode = document.querySelector(".gcode");
          // 生成验证码函数，生成五位随机数字或小写字母
          var getcode = function () {
            var code = Math.random().toString(36).substr(3, 4);
            // 最后函数返回验证码
            return code;
          };
          egcode.onclick = function () {
            egcode.innerHTML = getcode();
          };
          egcode.click();
        </script>
    <script>
      var cityList = new Array();
      cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");
      cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");
      cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
      cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");
      cityList[4] = new Array("武汉市", "襄阳市", "孝感市", "黄冈市", "十堰市");
      function changeCity(val) {
        var city = document.getElementById("city"); 
        city.options.length = 0;
        var arr = cityList[val];
        for (var i = 0; i < arr.length; i++) {
          //创建option元素节点
          var option = document.createElement("option"); 
          option.innerHTML = arr[i];
          option.value = arr[i]; 
          city.appendChild(option);
        }
      } 
       //获取到城市的下拉列表框
       //先去清空原有的城市下拉列表内容
       //设置option元素节点的内容和value
       //将新创建的option节点添加到城市下拉框中
    </script>
    <script>
    var fileInput = document.getElementById('test-image-file');
    var info = document.getElementById('test-file-info');
    var preview = document.getElementById('test-image-preview'); 
    fileInput.addEventListener('change', function () { // 监听change事件
     preview.style.backgroundImage = ''; // 清除背景图片 
     if (!fileInput.value) {
    info.innerHTML = '没有选择文件';
    return;
    } 
    var file = fileInput.files[0]; // 获取File引用
     // 获取File信息:
    info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate;
    if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
    alert('不是有效的图片文件!');
    return;
    } 
    var reader = new FileReader(); // 读取文件
     reader.onload = function (e) { // 发起一个异步操作来读取文件内容
    var data = e.target.result; // data串形如： '...(base64编码)...' 
    preview.style.backgroundImage = 'url(' + data + ')';
    }; 
    reader.readAsDataURL(file); // 以DataURL的形式读取文件
     });
    </script>
  </body>
</html>
